﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>服务展示</title>
    <style type="text/css">
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }

        table {
            width: 100%;
            text-align: center;
        }
    </style>
    <script src="../../Scripts/jquery.min.js"></script>


    <script src="../../Scripts/Timer/Timer.js"></script>
    <script>
        $(function () {


            $.ajax({
                data: { 'floor': '<%=ViewData["floor"]%>', 'danweiguid': '<%=ViewData["danweiguid"]%>' },
                url: "../../Map/GetMapArea",
                dataType: "json",
                success: function (data2) {
                    $(data2).each(function () {
                        var strarea = this.Area;
                        var officeid = this.RowGuid;
                        if (strarea != null) {
                            var arr = strarea.split(",");
                            var x1 = parseInt(arr[0]);
                            var y1 = parseInt(arr[1]);
                            var x2 = parseInt(arr[2]);
                            var y2 = parseInt(arr[3]);
                            MouseOverMap(x1, y1, x2, y2, 0, 0, officeid);
                            //showDiv(personhtml, x2 + 10, y1);
                        }

                    });


                }
            });

            var meizz;  //设置一个全局变量 
            var n = 300000;  //时间设置(300秒)          
            meizz = setTimeout("window.location.href='../../Map/Index'", n);
            document.onmousedown = function () {
                clearTimeout(meizz);
                meizz = setTimeout("window.location.href='../../Map/Index'", n);
            }
            document.onkeydown = function () {
                clearTimeout(meizz);
                meizz = setTimeout("window.location.href='../../Map/Index'", n);
            }


        });
        

        function showDiv(txt, iLeft, iTop) {
            $('#showtitle').css("display", "block");
            $('#showtitle').css("top", iTop);
            $('#showtitle').css("left", iLeft);
            $('#showtitle').html(txt);

        }
        var divcount = 0;
        function MouseOverMap(x1, y1, x2, y2, imgleft, imgtop, officeid) {
            var divname = "leveldiv" + divcount;
            var divElm = document.createElement(divname);
            //alert("div == "+divElm);
            var Left = x1;
            var Top = y1;
            var Right = parseInt(x2 - x1);
            var bottom = parseInt(y2 - y1);
            divElm.style.backgroundImage = "url(../../Images/touming.png)";
            divElm.style.position = "absolute";

            divElm.style.zIndex = 999;
            divElm.style.border = "solid 2px #FF0000";

            divElm.style.left = Left + imgleft + 0 + "px";
            divElm.style.top = Top + imgtop - 0 + "px";

            divElm.style.width = Right + "px";
            divElm.style.height = bottom + "px";
            divElm.style.cursor = "pointer";
            divElm.id = divname;
            divElm.onclick = function () {

                ; window.location.href = '../OfficePerson/' + officeid;
            }
            divElm.onmouseover = function () {
                var personhtml = "";
                $.ajax({
                    url: "../../Map/GetOfficePersonSimple",
                    data: { 'officeid': officeid },
                    success: function (data) {

                        personhtml = data;
                        personhtml = "<table width='95%' border='1'bordercolordark=000000 bordercolorlight=ffffff cellspacing='0' cellpadding='0' " + personhtml + "</table>";
                        if (data == "NoPerson") {
                            personhtml = "";
                            $('#showtitle').css("display", "none");
                        }
                        else {
                            showDiv(personhtml, x2 + 10, y1);
                        }

                    }
                });

            }
            divElm.onmouseout = function () {

                $('#showtitle').css("display", "none");
            }
            //$('#' + divname).css("background-image", "url(../../Images/touming.png)");

            //$('#' + divname).css("position", "absolute");

            //$('#' + divname).css("z-index", "999");

            //$('#' + divname).css("border", "solid 2px #FF0000");
            //$('#' + divname).css("left", Left + imgleft + 0);

            //$('#' + divname).css("top", Top + imgtop - 0);
            //$('#' + divname).css("width", Right);
            //$('#' + divname).css("height", bottom);
            //$('#' + divname).css("cursor", "pointer");

            document.body.appendChild(divElm);
            divcount++;
        }
    </script>
</head>
<body>

    <%--<div id="leveldiv" style="background-image: url(../../Images/touming.png); position: absolute; cursor: default; z-index: 999">
         
    </div>--%>
    <div style="position: relative; z-index: 1; width: 1920px; height: 1080px; cursor: default; top: 0; left: 0;">
        <img src='../../Images/<%=ViewData["floor"]%>.jpg' border="0" usemap="#pagepicmap" style="width: 1920px; height: 1080px; z-index: 50; position: absolute;" />
    </div>
     
    <div style="position: absolute; z-index: 1000; top: 902px;left:1742px">
        <input type="image" src="../../Images/back.jpg" onclick="javascript: window.history.go(-1);" />
    </div>

    <%--<map name="pagepicmap">
        <area shape="rect" coords="139,223,238,367" href="#" hrefs="content_19049.htm" />
    </map>--%>
    <div align="center" id="showtitle" style="display: none; width: 30%; background-color: #ffffff; padding: 15px; font-family: 宋体; font-size: 16px; font-weight: bold; border: 5px solid #D7FA9C; position: absolute; z-index: 10000; filter: alpha(opacity=90);">
    </div>



    <%--  <div style="display:inline" id=mp19049>戴仿真饰品当心超标</div>--%>
</body>
</html>
